<template>
  <div class="login" v-if="type === 'login' || type === 'forget'">
	<div class="logo_img">
		<img src="../../assets//login/logo_1.png" alt="">
	</div>
    <div class="loginPanel">
      <div class="loginHeader">
		<div class="h1">欢迎登录到 </div>
		<div class="h2">邵东市寄递物流治安管理平台</div>
		<div class="h3">Postal and delivery logistics management security platform</div>
	  </div>
      <div class="loginContent">
        <div class="loginItem">
          <div class="itemContent">
            <zy-input v-model="user_name" placeholder="请输入账号" prefix-icon="el-icon-user"></zy-input>
          </div>
        </div>
        <div class="loginItem" v-if="type === 'login'">
          <div class="itemContent">
            <zy-input v-model="password" placeholder="请输入密码" type="password" prefix-icon="el-icon-lock"></zy-input>
          </div>
        </div>
        <div class="loginItem" v-if="type === 'forget'">
          <div class="itemContent">
            <zy-input v-model="mobile" type="mobile" placeholder="请输入手机号"></zy-input>
          </div>
        </div>
        <div class="loginItem" v-if="type === 'forget' || type === 'passwordError'">
          <div class="itemContent">
            <zy-input v-model="code" class="codeInput" placeholder="请输入验证码"></zy-input>
            <zy-button type="primary" @click="countdown" :readonly="!!countdownTime" class="codeBtn">
              {{countdownTime?countdownTime+'s': '发送验证码'}}
            </zy-button>
          </div>
        </div>
        <div class="loginItem" v-if="type === 'forget'">
          <div class="itemContent">
            <zy-input v-model="new_password" placeholder="请输入新密码"></zy-input>
          </div>
        </div>
		<div class="loginItem l1" v-if="company_type !== 0 && type === 'login'">
          <div class="itemTitle"></div>
          <div class="itemContent">
            <span class="lg_btn re_btn" @click="toOther('register')">注册</span>
            <span class="lg_btn fo_btn" @click="toOther('forget')">忘记密码?</span>
          </div>
        </div>
        <div class="loginItem" v-if="type === 'login'">
          <div class="itemTitle"></div>
          <div class="itemContent">
            <zy-button type="primary" @click="login_into" class="loginBtn">登录</zy-button>
          </div>
        </div>
        <div class="loginItem" v-if="type === 'forget'">
          <div class="itemTitle"></div>
          <div class="itemContent">
            <zy-button style="flex: 1;margin-right: 24px;" type="primary" @click="submitForget(true)" :loading="forgetLoading" class="forgetBtn">确认
            </zy-button>
            <zy-button style="flex: 1;" @click="submitForget(false)" class="forgetBtn">返回</zy-button>
          </div>
        </div>

      </div>
      <div class="webRecord">网站备案/许可证号： 湘ICP备18001686号-1</div>
    </div>
  </div>
  <zy-register v-else @closeRegister="toOther('login')" :company_type="company_type"></zy-register>
</template>

<script>
	import {mapGetters, mapMutations} from "vuex";
	import zyRegister from "./register";

	export default {
		name: "login",
		data() {
			return {
				logImg: require('@/assets/login/logo2.png'),
				logImgText: require('@/assets/login/logoText.png'),
				user_name: "",
				password: "",
				mobile: "",
				new_password: "",
				code: '',
				type: "login",
				company_type: 1,
				countdownTime: 0,
				forgetLoading: false,
				sms_type: 'forget'
			};
		},
		computed: {
			...mapGetters(['getAreaList']),
		},
		components: {
			zyRegister
		},
		mounted() {
			localStorage.clear();
			let origin = window.location.origin;
			if (origin.match('company')) {
				this.company_type = 1;
			} else if (origin.match('cooper')) {
				this.company_type = 2;
			}
			this.getRegionList();
		},
		watch: {},
		methods: {
			...mapMutations(['changeState']),
			login_into() {
				var userAgent = navigator.userAgent; // 取得浏览器的userAgent字符串
				if (
					userAgent.indexOf("MSIE 8.0") > -1 ||
					userAgent.indexOf("rv:11.0) like Gecko") > -1
				) {
					var r = confirm(
						"系统暂不支持IE，建议使用谷歌浏览器！\n 去官网下载谷歌浏览器。"
					);
					if (r === true) {
						var google = "https://www.google.cn/intl/zh-CN/chrome/";
						window.open(google);
					} else {
						this.login_info();
					}
				} else {
					this.login_info();
				}
			},
			// 组装权限树
			put_auth(menus) {
				let authority = {};
				if (Array.isArray(menus) && menus.length > 0) {
					menus.forEach((v, k) => {
						if (Array.isArray(v.list) && v.list.length > 0) {
							let list_ = v.list || [];
							list_.forEach((v1, k1) => {
								authority[v1.route] = (function (actions) {
									let obj = {};
									actions.forEach(r => {
										return obj[r.action_key] = r.checked;
									});
									return obj;
								})(v1.actions);
							});
						}
					});
					return authority || {};
				}
			},
			login_info() {
				if (!this.user_name) {
					return this.$message.error("请填写用户名");
				}
				if (!this.password) {
					return this.$message.error("请填写密码");
				}

				let post_data = {
					account: this.user_name,
					password: this.password
				};
				this.$axios.post(this.$api.login, {
					...post_data
				}).then(res => {
					if (res.code === 200) {
						let {token, menus, user_type, type, user_name, user_id} = res.data || {};
						this.$message.success(res.msg);
						menus = menus.filter((item, index) => {
							item.list && (item.list = item.list.filter(subItem => {
								if (user_type === 2) {
									subItem.route = '/sorting' + subItem.route;
								} else if (user_type === 4) {
									subItem.route = '/cooperate' + subItem.route;
								}
								item.index = String(index);
								return subItem;
							}));

							return item;
						});
						this.$store.commit("changeState", {
							token: token,
							menuList: menus,
							authority: this.put_auth(menus),
							user_type: user_type,
							user_name: user_name,
							user_id: user_id,
							companyType: type
						});
						localStorage.setItem("store", JSON.stringify(this.$store.state));
						this.$router.replace({path: "/"});
					} else {
						this.$message.error(res.msg);
					}
				}).catch(res => {
					this.$message.error(res.msg || '服务繁忙请稍后再试');
				});
			},
			getRegionList() {
				if (!this.getAreaList.length) {
					this.$axios.post(this.$api.arriveRegionList, {}).then(res => {
						let {code, msg, data} = res;
						if (code == 200) {
							this.changeState({areaList: data})
						} else {
							this.$message.error(msg);
						}
					}).catch(ret => {
						this.$message.error(ret.msg || '服务繁忙，请稍后再试');
					});
				}
			},
			countdown() {
				this.timeOut();
				if (!this.mobile) {
					return this.$message.error("请填写手机号码");
				}
				this.$axios.post(this.$api.sendSms, {
					mobile: this.mobile,
					sms_type: this.sms_type,
				}).then(res => {
					let {code, msg, data} = res;
					if (code == 200) {
						this.$message.success(msg);
					} else {
						this.$message.error(msg);
					}
				}).catch(ret => {
					this.$message.error(ret.msg || '服务繁忙，请稍后再试');
				});
			},
			timeOut() {
				this.countdownTime = 60;
				let T = setInterval(() => {
					this.countdownTime--;
					if (this.countdownTime <= 0) {
						clearInterval(T);
					}
				}, 1000);
			},
			submitForget(isSubmit) {
				if (isSubmit) {
					if (!this.user_name) {
						return this.$message.error("请填写用户名");
					}
					if (!this.mobile) {
						return this.$message.error("请填写手机号码");
					}
					if (!this.code) {
						return this.$message.error("请填写验证码");
					}
					if (!this.new_password) {
						return this.$message.error("请填写新密码");
					}
					this.forgetLoading = true;
					this.$axios.post(this.$api.forgotPass, {
						account: this.user_name,
						password: this.new_password,
						user_type: 2,
						v_code: this.code,
						sms_type: this.sms_type,
						mobile: this.mobile,
					}).then(res => {
						this.forgetLoading = false;
						let {code, msg, data} = res;
						if (code == 200) {
							this.type = 'login';
						} else {
							this.$message.error(msg);
						}
					}).catch(ret => {
						this.$message.error(ret.msg || '服务繁忙，请稍后再试');
					});
				} else {
					this.type = 'login';
				}
			},
			toOther(type) {
				this.type = type;
			}
		}
	};
</script>

<style scoped lang="less" src="@/style/login/login.less">

</style>
